<template>
	<view class="equipment">
		<cu-custom bgColor="bg-gradual-orange-red" :isBack="true">
			<block slot="content">语音播报设备</block>
		</cu-custom>
		<view class="equipment-top">
			<image src="../../../static/equipmented_01.png"></image>
			<view class="top-title">
				您可以通过绑定设备来开启语音播报功能
			</view>
		</view>
		<view class="deposit-info">
			<view class="deposit-items">
				绑定状态：<text class="deposit-status" v-if="other">正常（押金已缴纳）</text><text v-else class="text-red">等待支付押金</text>
			</view>
			<view class="deposit-items" v-if="other">
				押金解冻进度：<text class="deposit-status">{{shop.shop_earnings_max}}/5000.00</text>
				<button @click="takeDraw" v-if="shop.type==1" class="takeBtn" :disabled="shop.aliot&&shop.deposit==0">解冻</button><text v-else>（尚未满足解冻金额）</text>
			</view>
		</view>
		<view class="equipment-list" v-if="other">
			<view class="label-title">设备绑定</view>
			<view class="equipment-action">
				<view class="action-input">
					<view class="input-all">
						<input adjust-position placeholder="输入您的设备编号" v-model="bindCode" />
						<text class="qcodeIcon cuIcon-scan"></text>
					</view>
				</view>
				<button class="takeBtn" v-on:click="setBind">绑定</button>
			</view>
			<view class="label-title">
				已绑定的设备
			</view>
			<view class="record-list">
				<view class="list-item" v-if="record">
					<text class="equipment-no">{{record}}</text><text class="remove-btn" @click="takeFalse">解除绑定</text>
				</view>
				<uni-load-more :status="more" v-if="record"></uni-load-more>
			</view>
		</view>
		<view class="equipment-status">
			<view class="equipment-intro">
				<view class="intro-title">绑定须知：</view>
				<view class="intro-content">绑定设备需要缴纳50元押金，该押金在累计收入达到5000元时，可全额提现。</view>
			</view>
			<div class="padding flex flex-direction" v-if="!other">
				<button class="pay-btn cu-btn bg-red lg" :disabled="payNow"  @click="goChenck">{{payStatus}}</button>
			</div>
		</view>
	</view>
</template>
<script>
	import equApi from '@/api/equipment';
	import agent from '@/api/agent';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				record: "",
				bindCode: '',
				page: 1,
				status: 'more',
				more: 'noMore',
				deposit: false,
				other: false,
				task: false,
				payNow:false,
				payStatus:'申请绑定',
				shop:'',
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo', 'imgHost']),
		},
		components: {
			uniLoadMore
		},
		onLoad(params) {
			this.getRecord();
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading';
				this.page++;
			}
		},
		methods: {
			async applyPay(){
				equApi.applyPay({shop_id:this.shop.shop_id,}).then(res=>{
					if(res.code == 1){
						this.payNow =true;
						this.payStatus = '等待拓店者支付押金';	
						console.log(res.data);
					}else{
						console.log(res.data);
					}
				})
			},
			async goPay() {
				equApi.getWxpay({spid:this.shop.shop_id}).then(res=>{
					if (res.code == 1) {
						this.takePay(res.data);
					} else {
						console.log(res);
						this.showModels('服务未开启', false);
					}
				})
			},
			async changeDeposit(){
				if(this.shop.shop_id){
					uni.showToast({
						title:'网络错误...',
						icon:none,
					});
					return false;
				}
				equApi.setDeposit({shop_id:this.shop.shop_id}).then(res=>{
					console.log(res);
					if (res.code == 1) {
						this.loadData();
					} else {
						uni.showToast({
							title:'网络错误...',
							icon:none,
						});
						console.log(res);
					}
				})
			},
			takePay(params) {
				let _this = this;
				wx.requestPayment({
					timeStamp: params.timeStamp,
					nonceStr: params.nonceStr,
					package: params.package,
					signType: 'MD5',
					paySign: params.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						_this.other=true;
						_this.changeDeposit();
						_this.getRecord();
					},
					fail: function(err) {
						_this.getRecord();
						_this.other=true;
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			goChenck() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['去支付', '申请拓店者支付'],
					success: function(result) {
						if (result.tapIndex == '0') {
							_this.goPay();
						} else if (result.tapIndex == '1') {
							_this.applyPay();
						}
					}
				})
			},
			takeDraw(){
				uni.showLoading({
					title: '加载中..'
				})
				agent.takeDraw({shop_id:this.shop.shop_id}).then(res=>{
					uni.hideLoading();
					if(res.code == 1){
						uni.showToast({
							title:'已解冻'
						});
						this.loadData();
					}else{
						uni.showToast({
							title:'错误',
						});
					}
					console.log(res);
				})
			},
			async getRecord(type) {
				let res = await equApi.profile({})
				if (res.code == 1) {
					this.shop = res.data;
					if(res.data.type==2&&res.data.deposit==0.00){
						this.payStatus = '等待拓店者支付';
						this.payNow = true;
					}
					if (res.data.aliot) {
						this.record = res.data.aliot;
						console.log(this.record);
					}
					if(res.data.deposit>0.00||res.data.aliot){
						this.other = true;
					}
					if(res.data.shop_earnings_max>=5000){
						this.task = true;
					}
				} else {
					this.showModels('服务未开启', false);
				}
			},
			async setBind() {
				this.more = 'loading';
				console.log(this.bindCode);
				let res = await equApi.appBind({
					device_number: this.bindCode,
				})
				if (res.code == 1) {
					console.log(res);
					this.more = 'noMore';
					this.showModels(res.msg, false);
					this.getRecord();
				} else {
					console.log(res.msg);
					this.more = 'noMore';
					this.showModels(res.msg, false);
				}
			},
			takePhoto() {
				var _this = this;
				this.more = 'loading';
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						if (res.result) {
							_this.bindCode = res.result;
							_this.more = 'noMore';
							_this.setBind();
						}
					}
				});
			},
			takeFalse() {
				this.showModels('服务热线：4009916595', false);
			},
			showModels(msg, status) {
				uni.showModal({
					title: '提示',
					content: msg,
					showCancel: status,
					success: function(res) {}
				});
			}
		},
	}
</script>

<style lang="less">
	.equipment {
		background: rgb(247, 247, 247);
		padding-bottom: 10px;
		font-family: "SimHei";
		height: 100vh;

		.equipment-top {
			height: 455rpx;
			width: 100%;
			background-color: #FFFFFF;
			text-align: center;

			.top-title {
				font-size: 24rpx;
				color: #000000;
				padding-top: 40rpx;
			}

			image {
				padding-top: 70rpx;
				padding-left: 50rpx;
				height: 300rpx;
				width: 200rpx;
			}
		}

		.equipment-list {
			text-align: left;
			font-family: "SimHei";

			.label-title {
				font-size: 28rpx;
				padding: 0 50rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-top: 1rpx solid rgb(185, 185, 185);
				border-bottom: 1rpx solid rgb(185, 185, 185);
			}

			.action-input {
				padding-left: 50rpx;
				display: inline-block;

				.input-all {
					border: 1rpx solid #ef5d1d;
					border-radius: 15rpx;
					height: 70rpx;
					line-height: 70rpx;
					width: 500rpx;
					padding-left: 10rpx;
					margin: 50rpx 0;
					position: relative;

					input {
						text-indent: 1em;
						margin-top: 7rpx;
						height: 56rpx;
						width: 390rpx;
						border-right: 1rpx solid rgb(196, 196, 196);
					}

					text {
						width: 46rpx;
						height: 46rpx;
						position: absolute;
						right: 35rpx;
						top: 3rpx;
						color: rgb(255, 59, 0);
						font-size: 46rpx;
					}
				}
			}
			.record-list {
				font-family: "SimHei";

				.list-item {
					height: 80rpx;
					padding: 0 50rpx;
					line-height: 80rpx;
					background-color: #ffffff;
					font-family: "SimHei";
					border-bottom: 1rpx solid rgb(185, 185, 185);
					font-size: 28rpx;

					text {
						color: #333333;
					}

					.remove-btn {
						float: right;
						height: 80rpx;
						line-height: 80rpx;
						color: #fc0000;
					}
				}
			}
		}

		.equipment-status {
			min-height: 250rpx;
			margin: 25rpx;
			font-size: 35rpx;
			background: #fff;
			border-radius: 15rpx;
			padding-bottom: 25rpx;

			.equipment-intro {
				padding: 0 25rpx;
			}

			.intro-title {
				height: 50rpx;
				line-height: 50rpx;
			}

			.intro-content {
				font-size: 28rpx;
				text-indent: 1em;
				padding: 15rpx 0;
			}
		}

		.takeBtn {
			float: right;
			height: 60rpx;
			width: 120rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #ef5020;
			color: #FFFFFF;
			margin-top: 53rpx;
			margin-right: 50rpx;
		}

		.deposit-items {
			font-size: 28rpx;
			padding-left: 50rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-top: 1rpx solid #b9b9b9;

			.takeBtn {
				margin-top: 10rpx;
			}
		}
	}
</style>
